<template>
  <view class='classSearch'>
    <!-- 全局搜索 -->
    <!-- 关键词 -->
    <view class='input_box'>
      <view class='input_item'>
        <view>
          <text class='iconfont icon-sousuo'></text>
        </view>
        <input type="text" placeholder="请输入关键词搜索" v-model="form_data.keyword">
      </view>
    </view>
    <view class='condition_list'>
      <!-- 是否折叠 弃用 -->
      <!-- <view>
        <select-item :list='arr1' :index='arr1_index' @selected='getSelected($event,0)'></select-item>
      </view> -->
      <!-- 标题和正文 -->
      <view>
        <view class='title'>标题和正文</view>
        <select-item :list='arr2' :index='arr2_index' @selected='getSelected($event,1)'></select-item>
      </view>
      <!-- 信源 -->
      <view>
        <view class='title'>信源</view>
        <view class='selected_list'>
          <view  v-for='(option,i) in source_list' :key='i' @tap='selectOption(option,i)'>
            <view :class='{on1: option.is_show}'>
              {{option.option}}
              <view class='close_btn' v-if='option.is_show'>
                <view></view>
                <text class='iconfont icon-guanbi'></text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 时间 -->
      <view>
        <view class='title'>时间</view>
        <view class='time_box'>
          <view :class='{on1:date_index == 0}' @tap='selectDate(0)'>
            今日
            <view class='close_btn' v-if='date_index == 0'>
              <view></view>
              <text class='iconfont icon-guanbi'></text>
            </view>
          </view>
          <view class='select_date' :class='{on1:date_index == 1}' @tap='selectDate(1)'>
            {{date_arr.length == 0?"自定义":date_arr[0].slice(0,10)+" 至 "+date_arr[1].slice(0,10)}}
            <view class='close_btn' v-if='date_index == 1'>
              <view></view>
              <text class='iconfont icon-guanbi'></text>
            </view>
          </view>
        </view>
      </view>
      <!-- 排除关键字 -->
      <view class='input_view'>
        <view class='title'>过滤词</view>
        <view class='textarea_item'>
          <textarea type="text" placeholder="请输入过滤词，用+连接表示且关系" v-model="form_data.noKeyword"></textarea>
        </view>
      </view>
      <!-- 指定信源 -->
      <view class='input_view'>
        <view class='title'>指定域名</view>
        <view class='input_item'>
          <input type="text" placeholder="请输入域名" v-model="form_data.domain">
        </view>
      </view>
      <!-- 历史搜索条件 -->
      <view v-if='history_arr.length != 0'>
        <view class='title history_title'>
          <text>历史搜索条件</text>
          <text @tap='emptyHistory'>清空历史</text>
        </view>
        <select-item :list='history_arr' @selected='getSelected($event,3)'></select-item>
      </view>
    </view>

    <view class='btn_box'>
      <button class='btn' @tap='cancel'>取消</button>
      <button class='btn' @tap='search'>搜索</button>
    </view>


    <!-- 日期选择器 -->
    <datepicker 
      :show='picker_show'
      @confirm='confirmDate'
      @cancel='closePicker'></datepicker>
  </view>
</template>

<script>

  import selectItem from '../common/select.vue'
  import datepicker from '@/pages/common/datepicker.vue'

  export default {
    components: {
      selectItem,
      datepicker
    },
    data() {
      return {
        arr1: ["相似折叠","OCR识别"],
        arr1_index: 0,
        arr2: ["标题和正文","标题","正文"],
        arr2_index: 0,
        source_list: [],
        arr3_index: [],
        history_arr: [],

        date_index: 0,
        picker_show: false,
        date_arr: [],

        form_data: {
            startTime: "",     // 开始时间
            endTime: "",       // 结束时间
            siteTypes: [],     // 信源类型
            keyword: "",       // 关键字
            sentiment: [1,0,-1],     // 情感
            pageIndex: 1,
            pageSize: 10,
            matchMode: 1,      //  1为标题加正文，2为仅标题，3为仅正文，4为仅ocr
            domain: "",        // 域名
            noKeyword: "",     // 非关键字
        },
        
      }
    },
    onReady() {
      this.getSource();
      this.selectDate(0);
      const history = uni.getStorageSync('history');
      if(uni.getStorageSync('history')) this.history_arr = uni.getStorageSync('history');
    },
    methods: {
      // 获取所有信源
      getSource() {
        this.$http({
          url: this.$api.source,
        }).then( res => {
          if(res.code == 0) {
            this.source_list.push( {
                option: "全部",
                name:"",
                is_show: true
              })
            Object.keys(res.data).forEach( key => {
              let obj = {
                option:res.data[key],
                name:key,
                is_show: false
              }
              this.source_list.push(obj);
              this.form_data.siteTypes.push(key)
            });
          }
        })
      },
      // 选择信源
      selectOption(option,i) {
        if(i == 0) {
          this.source_list.forEach(val => {
            val.is_show = false;
          })
          option.is_show = true;
        }else {
          this.source_list[0].is_show = false;
          option.is_show ? option.is_show = false : option.is_show = true;
        }
        let on_arr = [];
        let all_arr = [];
        this.source_list.forEach((val,i) => {
          if(i != 0) {
            all_arr.push(val.name)
            if(val.is_show) {
              on_arr.push(val.name)
            }
          }
        })
        if(on_arr.length == 0 || on_arr.length == this.source_list.length-1) {
          this.source_list[0].is_show = true;
          on_arr = all_arr
        }
        this.form_data.siteTypes = on_arr;
      },
      // 选择日期
      selectDate(index) {
        if(index == 1) {
          // 打开日历
          if(this.date_arr.length == 0) {
            this.picker_show = true;
          }else {
            if(this.date_index == index) {
              this.picker_show = true;
            }else {
              this.form_data.startTime = this.date_arr[0];
              this.form_data.endTime = this.date_arr[1];
            }
          }
        }else {
          // 今日
          let today = new Date()/1000;
          let start_time = this.$time(today,"YY-MM-DD") +" "+ "00:00:00";
          let end_time = this.$time(today);
          this.form_data.startTime = start_time;
          this.form_data.endTime = end_time;
        }
        this.date_index = index;
      },
      // 确定日期范围
      confirmDate(e) {
        let today = new Date(new Date().toLocaleDateString()).getTime();
        let last_day = new Date(new Date(e.date[1]).toLocaleDateString()).getTime();
        if(today < last_day) {
          uni.showToast({
            title: '日期范围不能大于今天',
            icon: 'none'
          });
          return
        }

        e.value.forEach((val,i) => {
          let date = val.replace(/\//g, '-');
          if(i == 1) {
            let today = this.$time(new Date()/1000,"DD");
            let lastDay = date.slice(8,10);
            if(today == lastDay) {
              date = date + " " + this.$time(new Date()/1000,"hh:mm:ss")
            }else {
              date = date + " " + "23:59:59"
            }
          }else {
              date = date + " " + "00:00:00"
          }
            this.date_arr[i] = date
        });
        this.form_data.startTime = this.date_arr[0];
        this.form_data.endTime = this.date_arr[1];
        this.picker_show = false;

      },
      // 关闭日期选择器
      closePicker() {
        this.picker_show = false;
      },
      // 获取选择结果
      getSelected(e,index) {
        switch(index) {
          // 是否折叠
          case 0: 
            
          break;
          case 1: 
            // 标题和正文
            this.form_data.matchMode = e.index+1;
          break;
          case 3: 
            // 历史
            this.form_data.keyword = e.content
          break;
        }
      },
      // 清空历史
      emptyHistory() {
        uni.removeStorageSync('history');
        this.history_arr = [];
      },
      // 点击搜索
      search() {
        if(this.form_data.keyword == "") {
          uni.showToast({
            title: '请输入关键词',
            icon: 'none'
          });
          return
        }
        this.$store.state.search_formData = this.form_data;
        this.$store.state.date_index = this.date_index;
        this.$store.state.source_list = this.source_list;
        this.history_arr.push(this.form_data.keyword);
        let newArr = [...new Set(this.history_arr)];
        this.history_arr = newArr;
        uni.setStorageSync('history',newArr);
        uni.navigateTo({
          url: './searchRes'
        });
      },
      // 点击取消
      cancel() {
        uni.navigateBack({
          delta: 1
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
.classSearch {
  width: 100%;
  padding: 20upx 20upx 130upx;
  box-sizing: border-box;
  .input_box {
    padding-bottom: 40upx;
    box-sizing: border-box;
  }
  .condition_list {
    >view {
      margin-bottom: 10upx;
      .title {
        height: 55upx;
        font-size: 28upx;
        color: #333;
        font-weight: 600;
      }
      .history_title {
        display: flex;
        justify-content: space-between;
        padding-right: 20upx;
        box-sizing: border-box;
        >text:nth-child(2) {
          color: #666;
          font-weight: 500;
        }
      }
      .time_box {
        width: 100%;
        padding-left: 6upx;
        box-sizing: border-box;
        margin-bottom: 25upx;
        display: flex;
        >view {
          width:220upx;
          height:60upx;
          box-sizing: border-box;
          border-radius:6upx;
          overflow: hidden;
          font-size: 26upx;
          color: #666;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          background: #fff;
          .close_btn {
            width:46upx;
            height:36upx;
            position: absolute;
            right: 0;
            bottom: 0;
            >view {
              width: 66upx;
              height: 100%;
              position: absolute;
              bottom: -12upx;
              right: -24upx;
              transform: rotate(-45deg);
              background: #0084FF;
            }
            >text {
              position: absolute;
              right: -3upx;
              bottom: -4upx;
              font-size: 24upx;
              color: #fff;
              transform: scale(0.6)
            }
          }
        }
        .select_date {
          width: 460upx;
          margin-left: 20upx; 
        }
        .on1 {
          border:1px solid #0084FF;
          color: #0084FF;
          background:rgba(240,248,255,1);
        }
      }
    }
    .input_view {
      margin-bottom: 30upx;
    }
    .textarea_item {
      width: 100%;
      background: #fff;
      border-radius: 10upx;
      padding: 20upx;
      box-sizing: border-box;
      >textarea {
        width: 100%;
        height: 120upx;
        font-size: 28upx;
      }
    }
    .selected_list {
      width: 100%;
      >view {
        width: 33.333%;
        height: 60upx;
        display: inline-block;
        position: relative;
        margin-bottom: 10upx;
        >view {
          width:220upx;
          height:60upx;
          box-sizing: border-box;
          border-radius:6upx;
          overflow: hidden;
          font-size: 26upx;
          color: #666;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          background: #fff;
          .close_btn {
            width:46upx;
            height:36upx;
            position: absolute;
            right: 0;
            bottom: 0;
            >view {
              width: 66upx;
              height: 100%;
              position: absolute;
              bottom: -12upx;
              right: -24upx;
              transform: rotate(-45deg);
              background: #0084FF;
            }
            >text {
              position: absolute;
              right: -3upx;
              bottom: -4upx;
              font-size: 24upx;
              color: #fff;
              transform: scale(0.6)
            }
          }
        }
        .on1 {
          border:1px solid #0084FF;
          color: #0084FF;
          background:rgba(240,248,255,1);
        }
        .on2 {
          color: #ccc;
        }
      }
    }
  }
  .btn_box {
    width: 100%;
    display: flex;
    position: fixed;
    left: 0;
    bottom: 0;
    border-top: 1px solid #eee;
    box-sizing: border-box;
    >button {
      height: 96upx;
      border-radius: 0; 
      font-size: 34upx;
      &:nth-child(1) {
        background: #fff;
        color: #333;
      }
    }
  }
}
</style>